<template>
  <div>
    <a-list
      itemLayout="horizontal"
      :dataSource="data"
    >
      <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
        <a-list-item-meta>
          <a slot="title">{{ item.title }}</a>
          <span slot="description">
            <span class="security-list-description">{{ item.description }}</span>
            <span v-if="item.value"> : </span>
            <span class="security-list-value">{{ item.value }}</span>
          </span>
        </a-list-item-meta>
        <template v-if="item.actions">
          <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
        </template>

      </a-list-item>
    </a-list>
    <a-modal
      title="修改密码"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :maskClosable="false"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
        <a-form-item
          label="原密码"
        >
          <a-input
            v-decorator="[
              'OldPassword',{
                rules: [
                  { required: true, message: '', trigger: 'change' },
                  { validator: validatePassword }
                ]
              },
            ]"
            placeholder="请输入原密码"
          />
        </a-form-item>
        <a-form-item
          label="新密码"
        >
          <a-input
            v-decorator="[
              'NewPassword',{
                rules: [
                  { required: true, message: '', trigger: 'change' },
                  { validator: validatePassword }
                ]
              },
            ]"
            placeholder="请输入新密码"
          />
        </a-form-item>
        <a-form-item
          label="确认密码"
        >
          <a-input
            v-decorator="[
              'CNewPassword',{
                rules: [
                  { required: true, message: '', trigger: 'change' },
                  { validator: validatePassword }
                ]
              },
            ]"
            placeholder="请再次输入新密码"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import md5 from 'md5'
import { updatePassword } from '@/api/common'
import { validPassword } from '@/utils/validate'
export default {
  data () {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this, { name: 'password' })
    }
  },
  computed: {
    data () {
      return [
        { title: '账户密码', description: '当前密码强度', value: '强', actions: { title: '修改', callback: () => { this.handleUpdatePassword() } } },
        { title: '密保手机', description: '已绑定手机', value: '138****8293', actions: { title: '', callback: () => { } } }
        // { title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error') } } },
        // { title: '备用邮箱', description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning') } } },
        // { title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message') } } }
      ]
    }
  },
  methods: {
    validatePassword (rule, value, callback) {
      const { field } = rule
      const text = field === 'OldPassword' ? '请输入原密码' : (field === 'NewPassword' ? '请输入新密码' : '请再次输入新密码')
      if (!value) {
        callback(new Error(text))
      }
      if (!validPassword(value)) {
        callback(new Error('请输入8-20位大写字母，小写字母，数字和特殊字符其中任意三种或三种以上组合!'))
      }
      if (field === 'CNewPassword') {
        if (value !== this.form.getFieldValue('NewPassword')) {
          callback(new Error('新密码和确认密码不一致，请检查后重新输入!'))
        }
      }
      callback()
    },
    handleUpdatePassword () {
      this.visible = true
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          const { NewPassword, OldPassword } = values
          this.confirmLoading = true
          updatePassword({
            NewPassword: md5(NewPassword),
            OldPassword: md5(OldPassword),
            UserID: '1'
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('修改密码成功!', 2)
            } else {
              this.$message.error(res.msg, 2)
            }
          }).catch(() => {
            this.$message.error('修改密码失败，请稍后重试!', 2)
          }).finally(() => {
            this.confirmLoading = false
            this.handleCancel()
          })
        }
      })
    },
    handleCancel () {
      this.visible = false
      this.form.resetFields()
    }
  }
}
</script>
